.header {
    background : #333;
    width : 100%;
    height : 50px;
}

$animate_time : 0.3s;

// 上面横线交叉动画
@keyframes line_up_intersect
{
  to {
    top: 26px;
    transform: rotate(135deg);
    transform-origin: 50% 50%;
  }
}
// 上面横线恢复动画
@keyframes line_up_flat
{
  to {
    top: 20px;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}
// 下面横线交叉动画
@keyframes line_down_intersect
{
  to {
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
}
// 下面横线恢复动画
@keyframes line_down_flat
{
  to {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}

// 按钮样式
.btn_menu{
    position: relative;
    width: 50px; height:50px; cursor: pointer;
    &:hover .line_up{
        background-color: #EEE;
    }
    &:hover .line_down{
      background-color: #EEE;
    }
}
// 上横线样式
.line_up{
    position: absolute;
    left: 20px; top:20px;
    width: 18px; height: 1px;
    background-color:white;
    &.start{ // 附加交叉动画
      animation: line_up_intersect $animate_time forwards;
    }
    &.afterstart{ // 交叉动画后 保留变化
      transform: rotate(135deg);
      transform-origin: 50% 50%;
      top: 26px;
    }
    &.flat{ // 附加恢复动画
      animation: line_up_flat $animate_time forwards;
    }
}
//下横线样式
.line_down{
    position: absolute;
    left: 20px; top:26px;
    width: 18px; height: 1px;
    background-color:white;
    &.start{ // 附加交叉动画
        animation : line_down_intersect $animate_time forwards ;
    }
    &.afterstart{ // 交叉动画后 保留变化
      transform: rotate(45deg);
      transform-origin: 50% 50%;
    }
    &.flat{ // 附加恢复动画
      animation: line_down_flat $animate_time forwards;
    }
}
